<template>
  <div class="requestAdd">
    <!-- 筛选按钮 -->
    <div class="search-button">
      <el-button class="btn search" @click="getrealinvent"
        ><el-icon class="icon" color="#fff"> <Search /> </el-icon
        >查询</el-button
      >
      <el-button class="btn add" @click="handleRefresh"
        ><el-icon class="icon" color="#fff"> <Refresh /> </el-icon
        >重置</el-button
      >
      <el-button class="btn save" @click="handleExport()"
        ><el-icon class="icon" color="#fff"> <Download /> </el-icon
        >导出列表</el-button
      >
    </div>
    <el-tabs v-model="activeName" class="demo-tabs">
      <!-- 筛选条件 -->
      <div class="search">
        <div class="search-item">
          <el-date-picker
            v-model="time"
            type="daterange"
            align="right"
            range-separator="至"
            start-placeholder="申请开始日期"
            end-placeholder="结束日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </div>
        <div class="search-item" v-if="activeName !== 'three'">
          <el-input
            clearable
            style="width: 8vw"
            v-model="params.firstCompanyName"
            class="search-input"
            placeholder="请输入甲方单位"
          ></el-input>
        </div>
        <div class="search-item" v-if="activeName !== 'three'">
          <el-input
            clearable
            style="width: 8vw"
            v-model="params.projectCode"
            class="search-input"
            placeholder="请输入项目编号"
          ></el-input>
        </div>

        <div class="search-item" v-if="activeName !== 'three'">
          <el-input
            style="width: 8vw"
            clearable
            v-model="params.projectName"
            class="search-input"
            placeholder="请输入项目名称"
          ></el-input>
        </div>
        <template v-if="activeName == 'first'">
          <div class="search-item">
            <el-input
              style="width: 8vw"
              clearable
              v-model="params.contractCode"
              class="search-input"
              placeholder="请输入销售合同编号"
            ></el-input>
          </div>
          <div class="search-item">
            <el-input
              clearable
              v-model="params.secondCompanyName"
              class="search-input"
              placeholder="请输入客户单位"
            ></el-input>
          </div>
          <div class="search-item">
            <el-input
              clearable
              v-model="params.salesmanName"
              class="search-input"
              placeholder="请输入业务员"
            ></el-input>
          </div>
          <div class="search-item">
            <el-select
              v-model="params.contractCategory"
              placeholder="请选择销售类型"
              clearable
              class="search-input"
              style="width: 8vw"
            >
              <el-option
                v-for="dict in contractList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </div>
        </template>
        <template v-if="activeName == 'second'">
          <div class="search-item">
            <el-input
              style="width: 8vw"
              clearable
              v-model="params.purchaseContractCode"
              class="search-input"
              placeholder="请输入采购合同编号"
            ></el-input>
          </div>
          <div class="search-item">
            <el-input
              clearable
              v-model="params.supplierName"
              class="search-input"
              placeholder="请输入合作单位"
            ></el-input>
          </div>
          <div class="search-item">
            <el-input
              clearable
              v-model="params.applicantName"
              class="search-input"
              placeholder="请输入经办人"
            ></el-input>
          </div>
          <div class="search-item">
            <el-select
              v-model="params.purchaseType"
              placeholder="请选择所属业务"
              clearable
              class="search-input"
              style="width: 8vw"
            >
              <el-option
                v-for="dict in industryTypeList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </div>
        </template>
        <template v-if="activeName == 'three'">
          <div class="search-item">
            <el-input
              clearable
              style="width: 8vw"
              v-model="params.partyUnits"
              class="search-input"
              placeholder="请输入甲方单位"
            ></el-input>
          </div>
          <div class="search-item">
            <el-input
              clearable
              style="width: 8vw"
              v-model="params.supplierName"
              class="search-input"
              placeholder="请输入乙方单位"
            ></el-input>
          </div>
          <div class="search-item">
            <el-input
              clearable
              style="width: 8vw"
              v-model="params.synthesisContractCode"
              class="search-input"
              placeholder="请输入合同编号"
            ></el-input>
          </div>
          <div class="search-item">
            <el-input
              clearable
              v-model="params.handleName"
              class="search-input"
              placeholder="请输入经办人"
            ></el-input>
          </div>
          <div class="search-item">
            <el-select
              v-model="params.purchaseType"
              placeholder="请选择服务项目"
              clearable
              class="search-input"
              style="width: 8vw"
            >
              <el-option
                v-for="dict in serviceTypeList"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </div>
        </template>
      </div>

      <el-tab-pane label="项目销售合同" name="first" class="demoYabs">
        <div class="tabinfo">
          <!-- 表格数据 -->
          <el-table
            v-loading="loading"
            :data="projectContractList"
            border
            height="60vh"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              type="index"
              label="序号"
              :index="indexMethod"
              width="60"
              align="center"
            />
            <el-table-column
              label="年份"
              prop="year"
              :show-overflow-tooltip="true"
              min-width="60"
            />
            <el-table-column
              label="申请日期"
              prop="applicantDate"
              :show-overflow-tooltip="true"
              min-width="100"
            />
            <el-table-column
              label="甲方单位"
              prop="firstCompanyName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="项目执行地"
              prop="projectAddress"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="项目编号"
              prop="projectCode"
              :show-overflow-tooltip="true"
              min-width="180"
            >
              <template #default="{ row }">
                <el-dropdown
                  v-if="row.projectList"
                  trigger="hover"
                  @command="handleStock"
                >
                  <span
                    class="el-dropdown-link"
                    @click="handleProjectDetail(row.projectList)"
                  >
                    {{ row.projectList[0].projectCode }}
                    <el-icon class="el-icon--right"><CaretBottom /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- <el-dropdown-item>
                    <div class="stock-list">
                      <span class="stock-item">关联合同名称</span>
                    </div>
                  </el-dropdown-item> -->
                      <div class="autodropp">
                        <el-dropdown-item
                          v-for="item in row.projectList"
                          :command="item.projectId"
                        >
                          <div class="stock-list">
                            <span class="stock-item">{{
                              item.projectCode
                            }}</span>
                          </div>
                        </el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              label="项目名称"
              prop="projectName"
              :show-overflow-tooltip="true"
              min-width="100"
            />
            <el-table-column
              label="销售合同编号"
              prop="contractCode"
              :show-overflow-tooltip="true"
              min-width="180"
            >
              <template #default="{ row }">
                <span
                  v-if="row.contractCode"
                  @click="handlecontractCodeDetail(row)"
                  style="color: #409eff; cursor: pointer"
                  >{{ row.contractCode }}</span
                >
                <span v-else>{{ "--" }}</span>
              </template></el-table-column
            >
            <el-table-column
              label="采购内容"
              prop="purchaseContent"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="行业"
              prop="industry"
              :show-overflow-tooltip="true"
              min-width="80"
            >
              <template #default="{ row }">
                <span>{{ row.industry ? row.industry : "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="销售类型"
              prop="contractCategoryName"
              :show-overflow-tooltip="true"
              min-width="100"
            />
            <el-table-column
              label="合同类型"
              prop="contractKindName"
              :show-overflow-tooltip="true"
              min-width="100"
            />
            <el-table-column
              label="客户单位"
              prop="secondCompanyName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="销售金额(万)"
              prop="contractMoney"
              :show-overflow-tooltip="true"
              min-width="130"
              :formatter="formatContractMoney"
            >
            </el-table-column>

            <el-table-column
              label="业务员"
              prop="salesmanName"
              :show-overflow-tooltip="true"
              min-width="100"
            />
          </el-table>

          <!-- 分页 -->
          <pagination
            class="pagination"
            :total="total"
            v-model:page="params.pageNum"
            v-model:limit="params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目采购合同" name="second">
        <div class="tabinfo">
          <!-- 表格数据 -->
          <el-table
            v-loading="loading"
            :data="inoutstockDtlListList"
            border
            height="60vh"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              type="index"
              label="序号"
              :index="indexMethod"
              width="60"
              align="center"
            />
            <el-table-column
              label="年份"
              prop="year"
              :show-overflow-tooltip="true"
              min-width="60"
            />
            <el-table-column
              label="申请日期"
              prop="applicantDate"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="甲方单位"
              prop="partyUnitsName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="项目编号"
              prop="projectCode"
              :show-overflow-tooltip="true"
              min-width="180"
            >
              <template #default="{ row }">
                <el-dropdown
                  v-if="row.projectList"
                  trigger="hover"
                  @command="handleStock"
                >
                  <span
                    class="el-dropdown-link"
                    @click="handleProjectDetail(row.projectList)"
                  >
                    {{ row.projectList[0].projectCode }}
                    <el-icon class="el-icon--right"><CaretBottom /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- <el-dropdown-item>
                    <div class="stock-list">
                      <span class="stock-item">关联合同名称</span>
                    </div>
                  </el-dropdown-item> -->
                      <div class="autodropp">
                        <el-dropdown-item
                          v-for="item in row.projectList"
                          :command="item.projectId"
                        >
                          <div class="stock-list">
                            <span class="stock-item">{{
                              item.projectCode
                            }}</span>
                          </div>
                        </el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column
              label="项目名称"
              prop="projectName"
              :show-overflow-tooltip="true"
              min-width="120"
            >
              <template #default="{ row }">
                <span>{{ row.projectName ? row.projectName : "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="采购合同编号"
              prop="purchaseContractCode"
              :show-overflow-tooltip="true"
              min-width="200"
            >
              <template #default="{ row }">
                <span
                  v-if="row.purchaseContractCode"
                  @click="handlePurchaseDetail(row)"
                  style="color: #409eff; cursor: pointer"
                  >{{ row.purchaseContractCode }}</span
                >
                <span v-else>{{ "--" }}</span>
              </template></el-table-column
            >
            <el-table-column
              label="合同采购内容"
              prop="purContractContent"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="合同类型"
              prop="contractTypeName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="合作单位"
              prop="distributorName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="采购金额(元)"
              prop="purchaseAmountSum"
              :show-overflow-tooltip="true"
              min-width="130"
              :formatter="formatContractMoney"
            />
            <el-table-column
              label="经办人"
              prop="applicantName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
          </el-table>

          <!-- 分页 -->
          <pagination
            class="pagination"
            :total="stockDtltotal"
            v-model:page="params.pageNum"
            v-model:limit="params.pageSize"
            @pagination="getstockDtltotalList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="综合服务合同" name="three">
        <div class="tabinfo">
          <!-- 表格数据 -->
          <el-table
            v-loading="loading"
            :data="comprehensiveServicesList"
            border
            height="60vh"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              type="index"
              label="序号"
              :index="indexMethod"
              width="60"
              align="center"
            />
            <el-table-column
              label="年份"
              prop="yearValue"
              :show-overflow-tooltip="true"
              min-width="60"
            />
            <el-table-column
              label="申请日期"
              prop="applicantDate"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="甲方单位"
              prop="partyUnitsName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="合同编号"
              prop="synthesisContractCode"
              :show-overflow-tooltip="true"
              min-width="200"
            >
              <template #default="{ row }">
                <span
                  v-if="row.synthesisContractCode"
                  @click="handleContractDetail(row)"
                  style="color: #409eff; cursor: pointer"
                  >{{ row.synthesisContractCode }}</span
                >
                <span v-else>{{ "--" }}</span>
              </template></el-table-column
            >
            <el-table-column
              label="乙方单位"
              prop="distributorName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="服务项目"
              prop="purchaseTypeName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="合同类型"
              prop="conTypeName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="采购品名"
              prop="purchaseUse"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="合同金额(元)"
              prop="contractAmount"
              :show-overflow-tooltip="true"
              min-width="130"
              :formatter="formatContractMoney"
            />
            <el-table-column
              label="经办人"
              prop="handleName"
              :show-overflow-tooltip="true"
              min-width="120"
            />
            <el-table-column
              label="起始日期"
              prop="startDate"
              :show-overflow-tooltip="true"
              min-width="100"
            />
            <el-table-column
              label="截止日期"
              prop="expirationDate"
              :show-overflow-tooltip="true"
              min-width="100"
            />
            <el-table-column
              label="服务时长（天）"
              prop="serviceTime"
              :show-overflow-tooltip="true"
              min-width="120"
            />
          </el-table>
          <!-- 分页 -->
          <pagination
            class="pagination"
            :total="comprehenServicetotal"
            v-model:page="params.pageNum"
            v-model:limit="params.pageSize"
            @pagination="getservicesList"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
import {
  getProjectContractListApi,
  getSynthesisContractListApi,
  getPurContractListApi,
} from "@/api/compact/multiple";
import { getDictsApi } from "@/api/dict";
import useUserStore from "@/store/modules/user";

const router = useRouter();
const activeName = ref("first");
//销售合同列表数据
const projectContractList = ref([]);
//项目采购列表数据
const inoutstockDtlListList = ref([]);
//综合服务合同列表数据
const comprehensiveServicesList = ref([]);

//销售类型列表
const contractList = ref([]);
//所属行业列表
const industryTypeList = ref([]);
//服务项目列表
const serviceTypeList = ref([]);
//筛选时间
let time = ref([]);
// 销售合同列表总数
const total = ref(0);
// 采购合同列表总数
const stockDtltotal = ref(0);
//综合服务列表总数
const comprehenServicetotal = ref(0);
// 表格加载效果
const loading = ref(false);
//当前用户信息
const userStore = useUserStore();
// 搜索参数
const originalParams = {
  startDate: null, //开始日期
  endDate: null, //结束日期
  firstCompanyName: "", // 项目销售合同甲方单位
  projectCode: "", //项目编号
  projectName: "", // 项目名称
  contractCode: "", //销售合同编号
  secondCompanyName: "", //客户单位
  salesmanName: "", //业务员
  contractCategory: null, //销售类型
  applicantName: "", //经办人
  purchaseContractCode: "", //采购合同编号
  handleName: "", //经办人
  supplierName: "", //乙方单位
  synthesisContractCode: "", //综合合同编号
  partyUnits: "", // 综合合同甲方单位
  // purchaseType: null, //所属行业
  purchaseType: null, //服务项目
  masterContractType: null, //列表固定参数
  pageNum: 1,
  pageSize: 50,
};
// 将初始数据转化为响应式对象
const params = reactive({ ...originalParams });

/**
 * @description: 重置
 */
const handleRefresh = () => {
  time.value = [];
  Object.assign(params, {
    startDate: null, //开始日期
    endDate: null, //结束日期
    firstCompanyName: "", // 项目销售合同甲方单位
    projectCode: "", //项目编号
    projectName: "", // 项目名称
    contractCode: "", //销售合同编号
    secondCompanyName: "", //客户单位
    salesmanName: "", //业务员
    contractCategory: null, //销售类型
    applicantName: "", //经办人
    purchaseContractCode: "", //采购合同编号
    handleName: "", //经办人
    supplierName: "", //乙方单位
    synthesisContractCode: "", //综合合同编号
    partyUnits: "", // 综合合同甲方单位
    // purchaseType: null, //所属行业
    purchaseType: null, //服务项目
    masterContractType: null, //列表固定参数
    pageNum: 1,
    pageSize: 50,
  });
  if (activeName.value === "first") {
    getList();
  } else if (activeName.value === "second") {
    getstockDtltotalList();
  } else {
    getservicesList();
  }
};
/**
 * @description: 列表查询
 */
const getrealinvent = () => {
  if (activeName.value === "first") {
    getList();
  } else if (activeName.value === "second") {
    getstockDtltotalList();
  } else {
    getservicesList();
  }
};
watch(activeName, (newValue, oldValue) => {
  // 监听tab变化时将筛选条件数据恢复至原始数据
  time.value = [];
  params.startDate = null;
  params.endDate = null;
  Object.keys(originalParams).forEach((key) => {
    params[key] = originalParams[key];
  });

  if (newValue === "first") {
    getList();
  } else if (newValue === "second") {
    getstockDtltotalList();
  } else {
    getservicesList();
  }
});
/**
 * @description: 获取项目销售合同列表
 */
const getList = async () => {
  try {
    loading.value = true;
    let { pageNum, pageSize } = params;
    if (time.value != null && time.value.length > 0) {
      params.startDate = time.value[0];
      params.endDate = time.value[1];
    } else {
      params.startDate = '';
      params.endDate = '';
    }
    const res = await getProjectContractListApi({ pageNum, pageSize }, params);
    projectContractList.value = res.rows;
    total.value = res.total;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
/**
 * @description: 获取项目采购列表
 */

const getstockDtltotalList = async () => {
  try {
    loading.value = true;
    let { pageNum, pageSize } = params;
    if (time.value != null && time.value.length > 0) {
      params.startDate = time.value[0];
      params.endDate = time.value[1];
    } else {
      params.startDate = null;
      params.endDate = null;
    }
    params.masterContractType = 2; //列表固定参数
    const res = await getPurContractListApi({ pageNum, pageSize }, params);
    inoutstockDtlListList.value = res.rows;
    stockDtltotal.value = res.total;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
/**
 * @description: 获取综合服务合同列表
 */

const getservicesList = async () => {
  try {
    loading.value = true;
    let { pageNum, pageSize } = params;
    if (time.value != null && time.value.length > 0) {
      params.startDate = time.value[0];
      params.endDate = time.value[1];
    } else {
      params.startDate = null;
      params.endDate = null;
    }
    const res = await getSynthesisContractListApi(
      { pageNum, pageSize },
      params
    );
    comprehensiveServicesList.value = res.rows;
    comprehenServicetotal.value = res.total;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};

/**
 * @description: 处理导出
 * @param {String} flag 1.列表 2.明细列表
 */
const handleExport = async () => {
  console.log("daochu", activeName.value);
  // 日期
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  let month = currentDate.getMonth() + 1; // 月份是从 0 开始计数的，因此要加1
  if (month < 10) {
    month = "0" + month;
  }
  const day = currentDate.getDate();
  let date = year + "" + month + "" + day;
  // 随机数
  let randomNum = Math.floor(Math.random() * (999 - 100 + 1) + 100);
  // 用户昵称
  let userName = userStore.name;
  // 文件名
  let fileNmae = date + userName + randomNum;
  let { pageNum, pageSize } = params;
  if (activeName.value === "first") {
    /* 导出列表 */
    proxy.download(
      `/system/contract/selectProjectContractListExport?pageNum=${pageNum}&pageSize=${pageSize}`,
      params,
      `${fileNmae}.xlsx`,
      null,
      1
    );
  } else if (activeName.value === "second") {
    /* 导出列表 */
    proxy.download(
      `/system/purContract/selectProjectPurContractListExport?pageNum=${pageNum}&pageSize=${pageSize}`,
      params,
      `${fileNmae}.xlsx`,
      null,
      1
    );
  } else {
    /* 导出列表 */
    proxy.download(
      `/system/SynthesisContract/selectContExport?pageNum=${pageNum}&pageSize=${pageSize}`,
      params,
      `${fileNmae}.xlsx`,
      null,
      1
    );
  }
};
function formatContractMoney(row, column, cellValue) {
  // 判断数据是否为数字
  if (typeof cellValue === "number" && !isNaN(cellValue)) {
    // 将数据保留两位小数
    const formattedValue = cellValue.toFixed(2);
    return formattedValue;
  } else {
    // 如果数据不是数字，则原样返回
    return cellValue;
  }
}
/* 跳转营销合同详情 */
const handlecontractCodeDetail = (row) => {
  const { href } = router.resolve({
    path: `/SealManage/contract`,
    query: { contractId: row.contractId },
  });
  window.open(href, "_blank");
};
/* 跳转采购合同详情 */
const handlePurchaseDetail = (row) => {
  const { href } = router.resolve({
    path: `/SealManage/contractSeal`,
    query: { purchaseContractId: row.purchaseContractId },
  });
  window.open(href, "_blank");
};
/* 跳转销售合同/采购合同详情 */
const handleContractDetail = (row) => {
  if (row.modelTypeName === "综合服务模块") {
    const { href } = router.resolve({
      path: `/SealManage/serveContract`,
      query: { contractId: row.synthesisContractId },
    });
    window.open(href, "_blank");
  } else {
    const { href } = router.resolve({
      path: `/SealManage/contractSeal`,
      query: { purchaseContractId: row.synthesisContractId },
    });
    window.open(href, "_blank");
  }
};
/* 点击行内库存数据 */
const handleStock = async (command) => {
  const { href } = router.resolve({
    path: `/sales/project`,
    query: { projectId: command },
  });
  window.open(href, "_blank");
};
/* 跳转项目详情 */
const handleProjectDetail = (row) => {
  const { href } = router.resolve({
    path: `/sales/project`,
    query: { projectId: row[0].projectId },
  });
  window.open(href, "_blank");
};

/**
 * @description: 序号
 * @param {Number} index 索引
 */
function indexMethod(index) {
  const currentPage = params.pageNum;
  const pageSize = params.pageSize;
  const truelndex = (currentPage - 1) * pageSize + index + 1;
  return truelndex;
}
/**
 * @description: 获取字典
 */
async function getDicts() {
  // 销售类型
  await getDictsApi("erp_contract_category").then((res) => {
    if (res.code === 200) {
      contractList.value = res.data;
    }
  });

  // 所属行业
  await getDictsApi("erp_purchase_detail_type").then((res) => {
    if (res.code === 200) {
      industryTypeList.value = res.data.filter(
        (item) => item.value === 0 || item.value === 1
      );
    }
  });
  // 服务项目
  await getDictsApi("erp_export_detail_type").then((res) => {
    if (res.code === 200) {
      serviceTypeList.value = res.data;
    }
  });
}
onMounted(() => {
  getDicts();
  getList();
});
</script>

<style lang="scss" scoped>
.requestAdd {
  padding: 5px 20px;
  width: 100%;
  height: 100%;
  .pagination {
    height: 60px;
  }
  :deep(.el-tabs__item.is-top) {
    width: 120px;

    font-size: 16px;
  }
  .image-content {
    width: 100%;
    line-height: 0px;
    overflow: auto;
  }
}
</style>
